<template>
  <Dialog v-model="dialogVisible" title="公告预览" width="800px">
    <div class="announcement-preview">
      <!-- 公告头部 -->
      <div class="preview-header">
        <h2 class="announcement-title">{{ announcementData.title }}</h2>
        <div class="announcement-meta">
          <span class="meta-item">
            <el-icon><Document /></el-icon>
            {{ getTypeName(announcementData.type) }}
          </span>
          <span class="meta-item">
            <el-icon><Calendar /></el-icon>
            {{ announcementData.publishTime || '待发布' }}
          </span>
          <span class="meta-item">
            <el-tag :type="announcementData.status === 1 ? 'success' : 'warning'">
              {{ announcementData.status === 1 ? '已发布' : '草稿' }}
            </el-tag>
          </span>
        </div>
      </div>
      
      <!-- 分割线 -->
      <el-divider />
      
      <!-- 公告内容 -->
      <div class="preview-content">
        <div class="content-text" v-html="formatContent(announcementData.content)">
        </div>
      </div>
      
      <!-- 附件列表 -->
      <div class="preview-attachments" v-if="announcementData.attachments && announcementData.attachments.length > 0">
        <el-divider content-position="left">附件</el-divider>
        <div class="attachment-list">
          <div 
            v-for="(attachment, index) in announcementData.attachments" 
            :key="index"
            class="attachment-item"
          >
            <el-icon><Paperclip /></el-icon>
            <span class="attachment-name">{{ attachment.name }}</span>
            <span class="attachment-size">({{ attachment.size }})</span>
            <el-button link type="primary" size="small" @click="downloadAttachment(attachment)">
              下载
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 预览页脚 -->
      <div class="preview-footer">
        <el-divider />
        <div class="footer-info">
          <span>创建时间：{{ announcementData.createTime }}</span>
          <span v-if="announcementData.updateTime">更新时间：{{ announcementData.updateTime }}</span>
        </div>
      </div>
    </div>
    
    <template #footer>
      <el-button v-if="announcementData.status === 0" type="primary" @click="publishAnnouncement">
        发布公告
      </el-button>
      <el-button @click="editAnnouncement">编辑</el-button>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Document, Calendar, Paperclip } from '@element-plus/icons-vue'

const emit = defineEmits(['edit', 'publish'])
const dialogVisible = ref(false)
const announcementData = ref({} as any)

const getTypeName = (type: number) => {
  const typeMap = { 1: '系统公告', 2: '评价公告', 3: '紧急公告' }
  return typeMap[type] || '普通公告'
}

const formatContent = (content: string) => {
  if (!content) return ''
  // 简单的文本格式化，将换行符转换为 <br>
  return content.replace(/\n/g, '<br>')
}

const downloadAttachment = (attachment: any) => {
  // TODO: 实现附件下载功能
  console.log('下载附件:', attachment)
}

const publishAnnouncement = () => {
  emit('publish', announcementData.value)
  dialogVisible.value = false
}

const editAnnouncement = () => {
  emit('edit', announcementData.value)
  dialogVisible.value = false
}

const open = (data: any) => {
  dialogVisible.value = true
  announcementData.value = data
}

defineExpose({ open })
</script>

<style scoped>
.announcement-preview {
  padding: 20px 0;
}

.preview-header {
  text-align: center;
  margin-bottom: 20px;
}

.announcement-title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.announcement-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: #606266;
  font-size: 14px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.preview-content {
  margin: 30px 0;
  min-height: 200px;
}

.content-text {
  font-size: 16px;
  line-height: 1.8;
  color: #303133;
  text-align: justify;
}

.preview-attachments {
  margin-top: 30px;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 4px;
}

.attachment-name {
  flex: 1;
  color: #409eff;
  cursor: pointer;
}

.attachment-size {
  color: #909399;
  font-size: 12px;
}

.preview-footer {
  margin-top: 30px;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 12px;
}

@media (max-width: 768px) {
  .announcement-meta {
    flex-direction: column;
    gap: 10px;
  }
  
  .footer-info {
    flex-direction: column;
    gap: 5px;
  }
}
</style> 